<template>
  <div :class="[multipage === true ? 'multi-page':'multi-page', 'not-menu-page', 'home-page']">
    <a-row :gutter="8" class="home_title" >
        <a-col :span="18">
        	<a-badge v-if="users.type!='3'" :count="users.vipp===0?'普通会员':'云会员'" :offset="[35,0]" :numberStyle="{backgroundColor: '#FFA60B',margin: '8px 0 0 5px', color: '#FFFFFF',zIndex:'1'}">
        		<b class="home_title_b">{{users.company ||users.nickName}}</b>
			    </a-badge>
			    <a v-if="users.vipp==='0'" href="javascriph:;" class="home_title_a" style="color: #FF592C;margin-left: 60px;">【升级为物流云会员】</a>
    			<b v-if="users.type=='3'" class="home_title_b">{{users.nickName}}（系统用户）</b>
        </a-col>
        <a-col :span="6"  style="text-align: right; padding-right: 20px;">
        	<router-link to="/message/station">
	        	<a-badge :count="unreadSum" :offset="[10,0]" :numberStyle="{backgroundColor: '#F8552F', color: '#FFFFFF'}">
	        			站内消息
				    </a-badge>
        	</router-link>
        </a-col>
    </a-row>
    <a-row  class="home_user" >
        <a-col :span="12" class="home_user_left">
        	<div class="user_left_con">
        		<div class="user_left_img">
            	<img alt="头像" :src="avatar">
        		</div>
        		<div class="user_left_d" >
        			<p>{{greetings}}，<span class="user_left_name">{{users.nickName}}</span></p>
        			<p v-if="users.type!='3'">{{users.type==='1'?'个人用户':'企业用户'}}
        				<router-link :to="'/user/auth/step?f='+users.approvalStatus+'&createTime='+users.createTime+'&approvalTime='+users.approvalTime">
        					<span v-if="users.approvalStatus == 106" style="color: #F5B12E;"  class="user_left_qy">等待审核</span>
                  <span v-if="users.approvalStatus == 107" style="color: #15837A;"  class="user_left_qy">审核完成</span>
                  <span v-if="users.approvalStatus == 108" style="color: #FF2F47;"  class="user_left_qy">审核不通过</span>
			        	</router-link>
        			</p>
        			<p style="margin-bottom: 12px;" v-if="users.type!='3'">实名认证
        				<router-link to="/user/auth">
        					<span v-if="users.attestationStatus==111" style="color: #15837A;" class="user_left_sh">已认证</span>
                  <span v-if="users.attestationStatus==110" style="color: #F5B12E;" class="user_left_sh">认证中</span>
                  <span v-if="users.attestationStatus==109" style="color: #FF2F47;" class="user_left_sh">未认证</span>
                  <span v-if="users.attestationStatus==112" style="color: #FF2F47;" class="user_left_sh">认证失败</span>
			        	</router-link>
        			</p>
        			<p style="margin-bottom: 12px;" v-if="users.type=='3'">角色
        					<span  style="color: #15837A;" class="user_left_sh">{{users.roleName}}</span>
			        	</router-link>
        			</p>
        		</div>
        	</div>
        	<!--<a-row :gutter="20">
        		<a-col :span="4">
        			<img class="user_left_img" src="../../static/avatar/20180414165840.jpg"/>
        		</a-col>
        		<a-col :span="20">
        			<p>早上好，<span class="user_left_name">张三</span></p>
        			<p>国内企业 <span class="user_left_qy">等待初审</span></p>
        			<p>实名认证 <span class="user_left_sh">待认证</span></p>
        		</a-col>
        	</a-row>-->
        </a-col>
        <a-col :span="12" class="home_user_right" >
        	<!--<p>诚信指数<span class="user_right_fs">{{info.sinceritySum}}</span>分<a href="javascriph:;" style="color: #15837A;margin-left: 20px;">如何提升诚信指数</a></p>-->
    			<p v-if="info.userStarLevel && users.type!='3'">用户星级 <a-rate style="margin-left: 5px;" :defaultValue="info.userStarLevel" disabled allowHalf /></p>
    			<p>登录次数<span class="user_right_fs">{{info.loginTimes}}</span>次</p>
        </a-col>
    </a-row>
    <div style="min-height: 220px;" v-if="users.type == '3'"></div>
    <div v-if="users.type!='3'">
	    <div class="home_progress">
	    	<!--<span>30%</span>-->
		    <a-row class="home_perfect">
		        <a-col :span="24">
		        	<b class="home_perfect_title">信息完善度</b>
		        </a-col>
		    </a-row>
		    <div class="percent" :style="'left:'+(info.userPerfection-3)+'%'">
		    	{{info.userPerfection}}%
		    	<div class="horn"></div>
		    </div>
		    <a-row style="margin-top: 30px;">
		        <a-col :span="24">
					    <a-progress type="line" :percent="info.userPerfection || 0" :showInfo="false" />
		        </a-col>
		    </a-row>
	    </div>
	    <p style="margin-top: 15px;">您的信息完善度远远落后于同行水平，需求方很难找到您，建议您立即完善！</p>
	    <a-row class="home_wsinfo" >
	        <a-col :span="18">
	        	<p><b>【基本信息】</b>完善更多{{users.type==='1'?'个人':'企业'}}基本信息，{{users.type==='1'?'个人':'企业'}}资料，有助于快速通过审核。</p>
	        </a-col>
	        <a-col :span="6" style="text-align: right;">
	        	<router-link to="/user/info">
	        		<a href="javascript:;">立即完善</a>
	        	</router-link>
	        </a-col>
	    </a-row>
	    <a-row class="home_smrz">
	        <a-col :span="18">
	        	<p><b>【实名认证】</b>参与云南国际物流云诚信认证，共建物流诚信体系，提高{{users.type==='1'?'个人':'企业'}}信誉度。</p>
	        </a-col>
	        <a-col :span="6" style="text-align: right;" >
	        	<router-link to="/user/auth">
							<a href="javascript:;" v-if="users.attestationStatus==112">立即完善</a>
							<a href="javascript:;" v-if="users.attestationStatus==109">立即完善</a>
		        </router-link>
	        </a-col>
	    </a-row>
	    <a-row class="home_bt">
	        <a-col :span="24">
	        	<b class="home_bt_title">我的平台</b>
	        </a-col>
	    </a-row>
	<!--     <a-row class="home_platform" :gutter="10">
	        <a-col :span="6">
	        	 <a-row class="platform1" type="flex" justify="space-around" align="middle">
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/jiaoyi.png"/>
									<img class="img2" src="../../static/img/home/jiaoyi1.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">3</span>单</p>
				        	<p class="p1">我的交易</p>
				        </a-col>
				     </a-row>
	        </a-col>
	        <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle">
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/liulanliang.png"/>
									<img class="img2" src="../../static/img/home/liulanliang1.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">12</span>次</p>
				        	<p class="p1">我的浏览量</p>
				        </a-col>
				     </a-row>
	        </a-col>
	        <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle" >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/xianlu1.png"/>
									<img class="img2" src="../../static/img/home/xianlu11.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">6</span>条</p>
				        	<p class="p1">我的优先路线</p>
				        </a-col>
				     </a-row>
	        </a-col>
	        <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle"  >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/jingjia.png"/>
									<img class="img2" src="../../static/img/home/jingjia1.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">2</span>条</p>
				        	<p class="p1">我的竞价路线</p>
				        </a-col>
				     </a-row>
	        </a-col>
	    </a-row> -->
	    <a-row class="home_platform"  :gutter="10">
	        <a-col :span="6">
	        	 <a-row class="platform1" type="flex" justify="space-around" align="middle"  >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/cheyuan.png"/>
									<img class="img2" src="../../static/img/home/cheyuan1.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">{{info.releaseVehices}}</span>个</p>
				        	<p class="p1">我发布的车源</p>
				        </a-col>
				     </a-row>
	        </a-col>
	        <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle"  >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/huoyuan.png"/>
									<img class="img2" src="../../static/img/home/huoyuan1.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">{{info.releaseCargo}}</span>个</p>
				        	<p class="p1">我发布的货源</p>
				        </a-col>
				     </a-row>
	        </a-col>
	        <!--<a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle"  >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/xianlu2.png"/>
									<img class="img2" src="../../static/img/home/xianlu21.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">{{info.releaseLine}}</span>条</p>
				        	<p class="p1">我发布的线路</p>
				        </a-col>
				     </a-row>
	        </a-col>-->
	        <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle"  >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/cangchu-link.png"/>
									<img class="img2" src="../../static/img/home/cangchu-hover.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">{{info.releaseStorage}}</span>个</p>
				        	<p class="p1">我发布的仓储</p>
				        </a-col>
				     </a-row>
	        </a-col>
	         <a-col :span="6">
	        	<a-row class="platform1" type="flex" justify="space-around" align="middle" >
				        <a-col :span="12" style="text-align: center;">
									<img class="img1" src="../../static/img/home/xianlu1.png"/>
									<img class="img2" src="../../static/img/home/xianlu11.png"/>
				        </a-col>
				        <a-col :span="12" style="text-align: left;">
				        	<p><span class="span1">{{info.releaseDot}}</span>条</p>
				        	<p class="p1">我的发布的网点</p>
				        </a-col>
				     </a-row>
	        </a-col>
	    </a-row>
	    <a-row class="home_bt" style="padding-top: 10px;">
	        <a-col :span="24">
	        	<b class="home_bt_title">增值业务</b>
	        </a-col>
	    </a-row>
	    <a-row class="home_system" :gutter="50">
	        <a-col :span="8">
	        	<img src="../../static/img/home/wms.png" alt="" />
	        	<p><b>智能仓储管理系统</b></p>
	        	<p>
	        		通过入库业务、出库业务、仓库调拨、 库存调拨和虚仓管理等功能，实现完善 的企业仓储信息管理
	        	</p>
	    			<a-button style="width: 100px;margin-top: 20px;" type="primary" @click="showApply">在线申请</a-button>
	        </a-col>
	        <a-col :span="8">
	        	<img src="../../static/img/home/tms.png" alt="" />
	        	<p><b>配送管理系统</b></p>
	        	<p>
	        		通过入库业务、出库业务、仓库调拨、 库存调拨和虚仓管理等功能，实现完善 的企业仓储信息管理
	        	</p>
	    			<a-button style="width: 100px;margin-top: 20px;" type="primary" @click="showApply">在线申请</a-button>
	        </a-col>
	        <a-col :span="8">
	        	<img src="../../static/img/home/b2c.png" alt="" />
	        	<p><b>B2C电商平台</b></p>
	        	<p>
	        		通过入库业务、出库业务、仓库调拨、 库存调拨和虚仓管理等功能，实现完善 的企业仓储信息管理
	        	</p>
	    			<a-button style="width: 100px;margin-top: 20px;" type="primary" @click="showApply">在线申请</a-button>
	        </a-col>
	    </a-row>
    </div>
    <!--<div class="home_but">
    	<a-button style="width: 100px;" type="primary">在线申请</a-button>
    </div>-->
    <use-apply ref='alertApply'></use-apply>
 </div>
</template>
<script>
import useApply from '@/components/dialog/useApply'
import HeadInfo from '@/views/common/HeadInfo'
import {mapState} from 'vuex'
import moment from 'moment'
moment.locale('zh-cn')

export default {
  name: 'HomePage',
  components: {HeadInfo,useApply},
  data () {
    return {
    	users:'',
    	greetings:'',
    	infoSum:'',
      series: [],
      chartOptions: {
        chart: {
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '35%'
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: []
        },
        fill: {
          opacity: 1

        }
      },
      projects: [
        {
          name: 'FEBS-Shiro',
          des: 'Spring Boot 2.0.4 & Shiro1.4.0 权限管理系统。',
          avatar: 'F'
        },
        {
          name: 'FEBS-Security',
          des: 'Spring Boot 2.0.4 & Spring Security 5.0.7 权限管理系统。',
          avatar: 'F'
        },
        {
          name: 'SpringAll',
          des: '循序渐进学习Spring Boot、Spring Cloud与Spring Security。',
          avatar: 'S'
        },
        {
          name: 'FEBS-Shiro-Vue',
          des: 'FEBS-Shiro前后端分离版本，前端架构采用Vue全家桶。',
          avatar: 'F'
        },
        {
          name: 'FEBS-Actuator',
          des: '使用Spring Boot Admin 2.0.2构建，用于监控FEBS。',
          avatar: 'F'
        }
      ],
      unreadSum:'',
      todayIp: '',
      todayVisitCount: '',
      totalVisitCount: '',
      userRole: '',
      userDept: '',
      lastLoginTime: '',
      welcomeMessage: '',
      info: {}
// @ApiModelProperty(value = "消息数量" infoSum =56L;
// @ApiModelProperty(value = "诚信指数" sinceritySum =56L;
// @ApiModelProperty(value = "用户星级" userStarLevel =4.6;
// @ApiModelProperty(value = "登入次数" loginTimes = 3L;
// @ApiModelProperty(value = "我的竞价线路")
// private Long biddingLine= 32L;
// @ApiModelProperty(value = "我的优先线路")
// private Long firstLine= 6L;
// @ApiModelProperty(value = "车源预览量")
// private Long vehicesPreview= 118L;
// @ApiModelProperty(value = "货源预览量")
// private Long cargoPreview= 15L;
// @ApiModelProperty(value = "线路预览量")
// private Long linePreview= 56L;
// @ApiModelProperty(value = "仓储预览量")
// private Long storagePreview= 76L;
// @ApiModelProperty(value = "发布车源" releaseVehices= 22L;
// @ApiModelProperty(value = "发布货源" releaseCargo= 99L;
// @ApiModelProperty(value = "发布线路" releaseLine= 143L;
// @ApiModelProperty(value = "发布仓储" releaseStorage= 178L;
// @ApiModelProperty(value = "用户信息完善度" userPerfection =100;
    }
  },
  created(){
  	console.log(this.user)
  	this.getUserinfoCountList();
  	this.getUserInfo();
  	this.welcome()
  	this.getNum()
  },
  computed: {
    ...mapState({
      multipage: state => state.setting.multipage,
      user: state => state.account.user,
    }),
    avatar () {
      return `static/avatar/${this.user.avatar}`
    }
  },
  watch:{
		'$route': function (newVal, oldVal) {
			if (newVal.path === '/home') {
				this.getUserinfoCountList()
				this.getUserInfo();
  			this.getNum()
			}
		},
	},
  methods: {
  	 getNum(){
    	this.$get('/message/internalMessage/received/notReadNum').then((r) => {
			console.log('r23:',r.data.data)
			this.unreadSum = r.data.data
        }).catch((e) => {})
    },
  	showApply(){
        this.$refs.alertApply.showModal('在线申请');
  	},
    // 获取统计数据
    getUserinfoCountList() {
      this.$get('/userinfo/getUserinfoCountList',{
      }).then((r) => {
        console.log('r.data.data::',r.data)
        this.info = r.data.data
      }).catch((e) => {})
    },
//  getUserInfo() {
//			this.$get('/userinfo/'+this.user.username).then((r) => {
//				console.log(r,'个人信息')
//				this.users = r.data.data
//				if(this.users.approvalTime == null){
//					this.users.approvalTime = ''
//				}
//          }).catch((e) => {})
//		},
		getUserInfo() {
			this.$get('/userinfo/open/username/'+this.user.username).then((r) => {
				console.log(r,'个人信息')
				this.users = r.data.data
				if(this.users.approvalTime == null){
					this.users.approvalTime = ''
				}
            }).catch((e) => {})
		},
    welcome () {
      const date = new Date()
      const hour = date.getHours()
      let time = hour < 6 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 18 ? '下午好' : '晚上好')))
   		this.greetings = time
      let welcomeArr = [
        '喝杯咖啡休息下吧☕',
        '要不要和朋友打局LOL',
        '要不要和朋友打局王者荣耀',
        '几天没见又更好看了呢😍',
        '今天又写了几个Bug🐞呢',
        '今天在群里吹水了吗',
        '今天吃了什么好吃的呢',
        '今天您微笑了吗😊',
        '今天帮助别人解决问题了吗',
        '准备吃些什么呢',
        '周末要不要去看电影？'
      ]
      let index = Math.floor((Math.random() * welcomeArr.length))
      console.log(`${time}，${this.user.username}，${welcomeArr[index]}`)
//    return `${time}，${this.user.username}，${welcomeArr[index]}`
     
    }
  },
  mounted () {

  }
}
</script>
<style lang="less">
	@import "../../static/less/home";
  .home_progress{
    .ant-progress-success-bg, .ant-progress-bg{
      background-color: #15837A;
      height: 14px !important;
      border-radius:7px;
    }
    .ant-progress-inner{
      margin-top: 5px;
    }
  }
</style>
